<template>
  <!-- 监测管理 -->
  <div class="app-container">
    <div class="btn-show panelBtn" @click="changePanel(true)"><i class="el-icon-arrow-left"></i></div>
    <div class="base-page-content" id="container"></div>
    <div class="content" :class="{'active':showPanel}">
      <div class="btn-hide panelBtn" @click="changePanel(false)"><i class="el-icon-arrow-right"></i></div>
      <search class="search" @search="handleSearch"></search>
      <charts class="charts" :showChartsBtn="showBtn" @search="handleSearch" @btnClick="chartDialog.visible=true"
        :list="mainList"></charts>
      <tables :showBtn="showBtn" ref="table" class="tables" @btnClick="tableDialog.visible=true" :list="mainList"></tables>
    </div>
    <el-dialog :visible.sync="chartDialog.visible" width="1000px">
      <charts class="dialog-charts" :list="mainList"></charts>
    </el-dialog>
    <el-dialog :visible.sync="tableDialog.visible" width="1000px">
      <tables class="dialog-tables" :list="mainList"></tables>
    </el-dialog>

    <threeModel :style="'width:'+threeWidth" ref="threeModel" @search="handleSearch"></threeModel>
  </div>
</template>

<script>
  import LineChart from "@/views/dashboard/commonTemplate";
  import search from "./search";
  import charts from "./charts";
  import tables from "./tables";
  import mtabs from "./tabs";
  import {listHistoryBySensor} from "@/api/page/monitoring.js"
  import threeModel from './threeModel.vue';

  export default {
    name: "datad",
    components: {
      LineChart,
      search,
      charts,
      tables,
      mtabs,
      threeModel
    },
    mounted() {
      // this.handleSearch();
    },
    data() {
      return {
        threeWidth:"100%",
        tabs: [1, 2, 3],
        statusOptions: [],
        selections: [],
        mainList: [],
        search: {},
        chartDialog: {
          visible: false
        },
        showBtn: false,
        tableDialog: {
          visible: false
        },
        showPanel: true
      };
    },
    methods: {
      handleChange(e) {
        console.log(e);
        this.selections = [...e];
      },
      getData(data) {
        let self = this;
        self.loading = true;
        if (data.time.length==0) {
          this.msgError("请先选日期时间!");
          return false;
        }
        if(data.list==null||data.list==""){
          this.msgError("请先选择传感器!");
          return false;
        }
        var obj = {
          beginTime:data.time!=null?data.time[0]:"",
          endTime:data.time!=null?data.time[1]:"",
          sensorIdArr:data.list.join(",")
        };
        listHistoryBySensor(obj)
          .then(response => {
            self.mainList = response.rows;
            self.loading = false;
            self.showBtn = true;
          })
          .catch(err => {
            self.loading = false;
          });
			},
			handleSearch(data) {
        this.$refs.table.activeName='0';
				this.getData(data);
			},
      changePanel(val){
        this.showPanel = val;
        // 打开panel则关闭three controls
        // this.$children[5].controls.enabled= !val;
        // this.$children[5].controls.domElement = document.getElementsByTagName("canvas");
      }
    },
    beforeDestroy(){
      this.$refs.threeModel.destroyThreeModel();
    },
	};
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/mixin.scss";
  @import "~@/assets/styles/variables.scss";

  /** 页面整体布局样式 */
  .app-container {
    background-color: rgb(245, 245, 245);
    height: 100%;
    position: relative;
    overflow: hidden;
  }

  .pic {
    position: absolute;
    width: 100%;
    height: 100%;
  }

  .panelBtn {
    width: 36px;
    height: 90px;
    color: #323232;
    line-height: 90px;
    text-align: center;
    font-size: 24px;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 9;
    top: -130px;
    bottom: 0;
    margin: auto;
    cursor: pointer;
    user-select: none;
  }

  .btn-show {
    z-index: 100;
    right: 0;
    border-radius: 10px 0 0 10px;
  }

  .content {
    position: absolute;
    z-index: 100;
    transition: right 0.2s;
    top: 0;
    right: -550px;
    width: 550px;
    height: 100%;
    border-radius: 5px;
    overflow-y: auto;

    &.active {
      right: 0;
    }

    .charts {
      height: 250px;
    }

    .tables {
      height: calc(100% - 368px);
    }

    .btn-hide {
      left: 0;
      border-radius: 0px 10px 10px 0px;
    }
  }

  .top {
    height: 280px;
    @include flex(space-between, flex-start);
  }

  .dialog-charts {
    height: 500px;
  }

  .dialog-tables {
    height: 500px;
  }

  #container {
    position: absolute;
    height: 100%;
    width: 100%;
  }

</style>
